<template>
  <!--表格组件-->

  <div :class="[componentSetOptions.class]">
    <!--  如果有用了这个子的，多切换几次tab会报错
    row-key="id"
      :tree-props="{children: componentSetOptions.children, hasChildren: 'hasChildren'}"
      -->
    <!--type expand:就是存在expand 点击下拉-->
    <el-table
        ref="table"
        :data="type=='expand'?tableChildData:componentSetOptions.tableData"
        border
        style="width: 100%"
        :row-class-name="tableRowClassName"
        v-loading="componentSetOptions.loading"
    >
      <!--:data="scope.row"-->
      <el-table-column type="expand" v-if="componentSetOptions.expand">
        <template slot-scope="props">
          <component
              :is="componentSetOptions.expandArray.componentName"
              :tableData="props.row"
              :tableChildData="props.row.tableChildData"
              :businessTableData="componentSetOptions.expandArray.businessTableData"
          >
          </component>
        </template>
      </el-table-column>
      <!--序号-->
      <el-table-column
          v-if="componentSetOptions.index"
          width="55"
          label="序号"
          type="index"
          align="center"
      />
      <!--多选框-->
      <el-table-column
          v-if="componentSetOptions.selection"
          width="55"
          type="selection"
          align="center"
      />
      <!--表格内容-->
      <template v-for="(item,key) in componentSetOptions.tableListProp">
        <el-table-column
            :key="key"
            :label="item.title"
            :width="item.isWidth?item.width+'px':'auto'"
            :min-width="!item.isWidth?item.width+'px':'auto'"
            :align="item.align"
            :header-align="item.headerAlign"
            :show-overflow-tooltip="item.tooltip"
            v-if="item.show"
        >
          <template slot-scope="scope">
            <!--显示汉字不在json里面-->
            <div v-if="item.type==='chineseCharacters'" :class="item.class">
              {{ scope.row[item.field] }}
            </div>
            <!--显示汉字在json里面-->
            <div v-if="item.type==='chineseCharactersJson'" :class="item.class">
              {{ scope.row[item.jsonName] == null ? '' : scope.row[item.jsonName][item.field] }}
            </div>

            <!--显示图片不在json里面-->
            <div v-if="item.type==='images'" :class="['table-img',item.class]">
              <ul v-if="scope.row[item.field]!=null" :style="{justifyContent: item.align}">
                <li v-for="(itemImg, keyImg) in JSON.parse(scope.row[item.field])" :key="keyImg">
                  <el-image
                      :style="{'width': item.imageWidth+'px', 'height': item.imageHeight+'px'}"
                      :src="itemImg[item.urlType]"
                      :preview-src-list="[itemImg[item.urlType]]"
                  >
                  </el-image>
                </li>
              </ul>
            </div>
            <!--显示图片在json里面-->
            <div v-if="item.type==='imagesJson'" :class="['table-img',item.class]">
              <ul v-if="scope.row[item.jsonName][item.field]!=null" :style="{justifyContent: item.align}">
                <li v-for="(itemImg, keyImg) in JSON.parse(scope.row[item.jsonName][item.field])" :key="keyImg">
                  <el-image
                      :style="{'width': item.imageWidth+'px', 'height': item.imageHeight+'px'}"
                      :src="itemImg[item.urlType]"
                      :preview-src-list="[itemImg[item.urlType]]"
                  >
                  </el-image>
                </li>
              </ul>
            </div>

            <!--显示文件不在json里面-->
            <div v-if="item.type==='file'" :class="['table-file',item.class]">
              <ul v-if="scope.row[item.field]!=null" :style="{justifyContent: item.align}">
                <li v-for="(itemImg, keyImg) in JSON.parse(scope.row[item.field])" :key="keyImg">
                  <i class="el-icon-document"></i>
                  <span>{{ itemImg.name }}</span>
                  <i class="el-icon-download" @click="uploadFileDownload(itemImg.url)"></i>
                </li>
              </ul>
            </div>
            <!--显示文件在json里面-->
            <div v-if="item.type==='fileJson'" :class="['table-file',item.class]">
              <ul v-if="scope.row[item.jsonName][item.field]!=null" :style="{justifyContent: item.align}">
                <li v-for="(itemImg, keyImg) in JSON.parse(scope.row[item.jsonName][item.field])" :key="keyImg">
                  <i class="el-icon-document"></i>
                  <span>{{ itemImg.name }}</span>
                  <i class="el-icon-download" @click="uploadFileDownload(itemImg.url)"></i>
                </li>
              </ul>
            </div>

            <!--显示时间戳不在json里面 到分-->
            <div v-if="item.type==='timeStamp'" :class="[item.class]">
              <!--显示时分秒-->
              <template v-if="item.timeType && item.timeType2!=1">
                {{ !scope.row[item.field]? '' : Utils.timeDateSeconds(scope.row[item.field]) }}
              </template>
              <!--不显示时分秒-->
              <template v-else-if="!item.timeType && item.timeType2!=1">
                {{ !scope.row[item.field] ? '' : Utils.timeDate(scope.row[item.field]) }}
              </template>
              <!--只到月-->
              <template v-else>
                {{ !scope.row[item.field] ? '' : Utils.timeDate1(scope.row[item.field]) }}
              </template>
            </div>

            <!--显示时间戳不在json里面 到分 还要变色-->
            <div v-if="item.type==='timeStampColor'" :class="[item.class]">
              <!--显示时分秒-->
              <template v-if="item.timeType">
                                <span :class="scope.row[item.isColor.field]==1?item.isColor.class:''">{{
                                    !scope.row[item.field] ? '' : Utils.timeDateSeconds(scope.row[item.field])
                                  }}</span>
              </template>
            </div>
            <!--显示时间戳在json里面 到分-->
            <div v-if="item.type==='timeStampJson'" :class="[item.class]">
              <!--显示时分秒-->
              <template v-if="item.timeType">
                {{
                  scope.row[item.jsonName] == null ? '' : Utils.timeDateSeconds(scope.row[item.jsonName][item.field])
                }}
              </template>
              <!--不显示时分秒-->
              <template v-else>
                {{
                  scope.row[item.jsonName] == null ? '' : Utils.timeDate(scope.row[item.jsonName][item.field])
                }}
              </template>
            </div>


            <!--选择element图标不在json里面-->
            <div v-if="item.type==='icon'" :class="['table-icon',item.class]">
              <i :class="scope.row[item.field]"/>
            </div>
            <!--选择element图标在json里面-->
            <div v-if="item.type==='iconJson'" :class="['table-icon',item.class]">
              <i :class="scope.row[item.jsonName] == null ? '' : scope.row[item.jsonName][item.field]"/>
            </div>

            <!--过滤器-->
            <div v-if="item.type==='filter'" :class="[item.class]">
              <template v-for="(itemFilter,keyFilter) in item.prop">
                <i :key="keyFilter" v-if="itemFilter.value==scope.row[item.field]">{{ itemFilter.label }}</i>
              </template>
            </div>


            <!--自定义组件-->
            <div v-if="item.type==='custom'" :class="item.class">
              <component :is="item.moduleName" :data="scope.row" :ref="item.ref"></component>
            </div>
            <!--操作-->
            <div v-if="item.type==='operation'" :class="[item.class]">
              <div v-if="componentSetOptions.operate.length!==0">
                <template v-for="(itemOperate,key) in componentSetOptions.operate">

                  <!--id等于20000显示 超级管理员显示，超级管理员登录放回的是['*']-->
                  <template v-if="itemOperate.id==='20000' || $store.state.routerRole.indexOf('*')!==-1">
                    <!--status 等于20000 显示-->
                    <template v-if="itemOperate.status.split(',').indexOf('20000')!==-1">
                      <el-button
                          v-if=" itemOperate.noField!='' && itemOperate.noField!=undefined?(scope.row[itemOperate.noField]!=itemOperate.noType?true:false):true"
                          :key="key"
                          :type="itemOperate.type"
                          :icon="itemOperate.icon"
                          :plain="itemOperate.plain"
                          :round="itemOperate.round"
                          @click="HandleUtils.handleParent($parent,itemOperate.method,scope.row,itemOperate,scope.$index)"
                      >
                        {{ itemOperate.name }}
                      </el-button>
                    </template>
                    <!--status 不等于20000 -->
                    <template v-else>
                      <template
                          v-if="itemOperate.status.split(',').indexOf(scope.row[componentSetOptions.statusName].toString())!==-1"
                      >
                        <el-button
                            v-if=" itemOperate.noField!='' && itemOperate.noField!=undefined?(scope.row[itemOperate.noField]!=itemOperate.noType?true:false):true"
                            :key="key"
                            :type="itemOperate.type"
                            :icon="itemOperate.icon"
                            :plain="itemOperate.plain"
                            :round="itemOperate.round"
                            @click="HandleUtils.handleParent($parent,itemOperate.method,scope.row,itemOperate,scope.$index)"
                        >
                          {{ itemOperate.name }}
                        </el-button>
                      </template>
                    </template>
                  </template>

                  <!--id不等于20000 判断status是否等于2000-->
                  <template v-else>
                    <template
                        v-if="$store.state.routerRole.indexOf(Number(itemOperate.id))!==-1 && itemOperate.status.split(',').indexOf('20000')!==-1"
                    >
                      <!--判断权限-->
                      <el-button
                          v-if=" itemOperate.noField!='' && itemOperate.noField!=undefined?(scope.row[itemOperate.noField]!=itemOperate.noType?true:false):true"
                          :key="key"
                          :type="itemOperate.type"
                          :icon="itemOperate.icon"
                          :plain="itemOperate.plain"
                          :round="itemOperate.round"
                          @click="HandleUtils.handleParent($parent,itemOperate.method,scope.row,itemOperate,scope.$index)"
                      >
                        {{ itemOperate.name }}
                      </el-button>
                    </template>
                    <template v-else>
                      <template
                          v-if="$store.state.routerRole.indexOf(Number(itemOperate.id))!==-1 && itemOperate.status.indexOf(scope.row[componentSetOptions.statusName])!==-1"
                      >
                        <!--判断权限-->
                        <el-button
                            v-if=" itemOperate.noField!='' && itemOperate.noField!=undefined?(scope.row[itemOperate.noField]!=itemOperate.noType?true:false):true"
                            :key="key"
                            :type="itemOperate.type"
                            :icon="itemOperate.icon"
                            :plain="itemOperate.plain"
                            :round="itemOperate.round"
                            @click="HandleUtils.handleParent($parent,itemOperate.method,scope.row,itemOperate,scope.$index)"
                        >
                          {{ itemOperate.name }}
                        </el-button>
                      </template>
                    </template>
                  </template>
                </template>
              </div>
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!--分页 为了在设置的时候不显示出来-->
    <div class="table-pagination" v-if="componentSetOptions.isPage">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="componentSetOptions.current_page"
          :page-size="componentSetOptions.pageSize"
          layout="total, prev, pager, next"
          :total="componentSetOptions.pageTotal">
      </el-pagination>
    </div>


  </div>
</template>

<script>
export default {
  components: {},
  props: ['componentSetOptions', 'tableChildData', 'type'],
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    //多选框 选择时候
    handleCheckedChange(key, item) {
      let prop = item;//数据源
      let field = prop.field;
      let number = this.componentSetOptions.tableData[key][field].length;
      let labels = [];
      for (let i = 0; i < this.componentSetOptions[field + 'Prop'].length; i++) {
        labels.push(this.componentSetOptions[field + 'Prop'][i].value)
      }
      prop.indeterminate = number > 0 && number < labels.length;
      prop.checkAll = number === labels.length;
      this.HandleUtils.handleParent(this.$parent, prop.changeMethod + 'TableChange', this.componentSetOptions.tableData[key][field], this.componentSetOptions.tableData[key], key)
    },
    //附件下载
    uploadFileDownload(url) {
      window.open(url)
    },
    //分页
    handleCurrentChange(val) {
      this.HandleUtils.handleParent(this.$parent, this.componentSetOptions.pageMethod, val)
    },
    //表格 多选后的值
    handleSelectionChange(selection) {
      let tableDataROW = [];
      selection.forEach((value) => {
        this.componentSetOptions.tableData.forEach((val) => {
          if (value[this.componentSetOptions.selectionVal] === val[this.componentSetOptions.selectionVal]) {
            tableDataROW.push(value[this.componentSetOptions.selectionVal]);
          }
        });
      });
      //把多选完后的数组保存起来
      this.componentSetOptions.selectionId = [];
      this.componentSetOptions.selectionId = tableDataROW;
      console.log(this.componentSetOptions.selectionId)
    },
    //表格 第几行显示什么颜色
    tableRowClassName({rowIndex}) {
      if (rowIndex % 2 === 0) {
        return 'warning-row';
      }
      return '';
    },
  },
};
</script>

<style lang="scss">
//图片
.table-img {
  ul {
    @include flex(wrap);
  }

  img {
    height: 100% !important;
    width: 100% !important;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
  }
}

//图片 dialog
.table-img-dialog {
  width: 800px;
  text-align: center !important;

  img {
    max-width: 100%;
  }
}

//操作
.table-button {
  ul {
    @include flex(wrap, center);

    li {
      .el-button--small {
        margin: 5px;
      }
    }
  }
}

//分页
//分页
.table-pagination {
  //position: fixed;
  //bottom: 0;
  //background: #fff;
  //width: calc(100% - 238px);
  //margin-left: -12px;
  //padding: 12px;
  margin-top: 15px;
  @include flex(nowrap, flex-end);
  z-index: 999;
}

.table-file {
  ul {
    @include flex(wrap);

    li {
      i:nth-of-type(1) {
        font-size: 16px;
        margin-right: 5px;
      }

      i:nth-of-type(2) {
        font-size: 13px;
        background: $color-info;
        border-radius: 50%;
        padding: 3px;
        margin: 0 5px;
        color: #fff;
        cursor: pointer;

        &:hover {
          background: $color-danger;
        }
      }

      margin-right: 8px;
    }
  }
}

.table-icon {
  font-size: 24px;
}
</style>
